<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=utf-8"%>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Register</title>
    <c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
    <link type="text/css" href="${path}/css/login.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.cjs.min.js"></script>
</head>  
<body>  
    <div id="login">  
        <h1>Register</h1>  
        <form method="post" action="${pageContext.request.contextPath}/user/registerVerift">
            <input type="text" required="required" placeholder="用户名" name="username"></input>
            <c:if test="${error!=null}">该用户名已存在，请修改为其他用户名</c:if>
            <input type="password" required="required" placeholder="密码" name="userpassword" id="passwordStrength">
            <span id="showStrength"></span>
            <script type="text/javascript">
            window.onload = function () {
                function setCss(_this,cssOption){
                //判断节点类型
                if (!_this || _this.nodeType ===3 || _this.nodeType === 8 ||!_this.style) {
                 return;
                }
                for(var cs in cssOption){
                 _this.style[cs] = cssOption[cs];
                }
                return _this;
               } 
              
               function trim(chars){
                return (chars ||"").replace(/^(\s|\u00a0)+|(\s|\u00a0)+$/g,"");
               }
               function passwordStrength(passwordStrength,showStrength){
                var self = this;
              
                /*字符权重；
                数字1，字母2，其他字符为3
                当密码长度小于6时不符合标准
                长度>=6，强度小于10，强度弱
                长度>=6，长度>=10且<15，强度中
                长度>=6，强度>=15，强*/
                passwordStrength.onkeyup = function(){
                 var _color = ["red","yellow","orange","green"],
                   msgs = ["密码太短","密码强度：弱","密码强度：中","密码强度：强"],
                   _strength = 0,
                   _v= trim(passwordStrength.value)
                 _vL= _v.length,
                   i=0;
                 passwordStrength.style.marginBottom="0px";
                 var charStrength = function(char){
                  //计算单个字符强度
                  if(char>=48 && char <=57){//数字
                   return 1;
                  }
                  if(char>=97 && char<=122){//小写
                   return 2;
                  }else{
                   return 3; //特殊字符
                  }
                 }
              
                 if(_vL<6){//计算模式
                  showStrength.innerText = msgs[0];
                  setCss(showStrength,{
                   "color":_color[0]
                  })
                 }else{
                  for(;i<_vL;i++){
                   //遍历字符
                   _strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
                  }
                  if(_strength<10){
                   //强度小于10
                   showStrength.innerText = msgs[1];
                   setCss(showStrength,{
                    "color":_color[1]
                   })
                  }
                  if(_strength>=10&&_strength<15){
                   showStrength.innerText = msgs[2];
                   setCss(showStrength,{
                    "color":_color[2]
                   })
                  }
                  if(_strength>=15){
                   showStrength.innerText = msgs[3];
                   setCss(showStrength,{
                    "color":_color[3]
                   })
                  }
                 }
                }
               }
               passwordStrength(
                 document.getElementById("passwordStrength"),
                 document.getElementById("showStrength"));
              };
              </script>
            </input>
            <input type="email" required="required" placeholder="邮箱" name="email" class="email" ></input>
<%--            <span class="empty"></span>--%>
<%--            <div class="check">--%>
<%--            <input type="text" required="required"  placeholder="验证码" name="n"></input>--%>
<%--                <button class="getNum" type="button" onclick="sendVerift();">获取验证码</button>--%>
<%--            </div>--%>
            <button class="but" type="submit">注册</button>
        </form>
        <div>已有账号？<a href="${pageContext.request.contextPath}/user/login">直接登陆</a></div>
    </div>
    <script>
        function sendVerift(){
            var email = $(".email").val() ;
          if(email==""){$(".empty").text("请输入邮箱");}
          else {
              $.ajax({
                  type: "POST",
                  // dataType: "json",
                  url: "http://localhost:8080/AskWeb/user/sendVerift" ,
                  dataType: "text",
                  data:{
                      email:email,
                  }
                  // data: {identity_type:'userPassword', identifier:userName, password:userPassword},
              });
          }
        }
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>  
</html>